<template>
	<view style="position: relative;">

		<!-- 上部车辆信息 扫码按钮 -->
		<view class="truck_item">
			<view class="div_item">
				<view>发往<span>{{truck.addrto}}</span></view>
				<view>卸货点 <span>{{truck.addrxhd}}</span></view>
			</view>
			<view class="div_item">
				<view>车牌号<span>{{truck.vehicleNo}}</span></view>
				<view>装车单号<span>{{truck.loadNo}}</span></view>
			</view>

			<view class="scan_div" v-if="type != 1">
				<view>运单数:{{order_num || '0'}}</view>
			</view>

		</view>

		<!-- 占位控件 -->
		<view :style="{ height: truck_item_height + 'px' }"></view>

		<!-- 运单列表 -->
		<view class="order_list_div">
			<view v-for="(item,index) in order_list" :key="item.docid" class="order_list_item">
				<view class="div_order_item">
					<view>货物<span>{{item.goodsname}}</span></view>
					<view>数量<span>{{item.goodsquantity}}</span></view>
				</view>
				<view class="div_order_item">
					<!-- <view>目的地<span>{{item.addrto}}</span></view> -->
					<view>卸货点<span>{{JSON.parse(item.addrxhd).nodeName || '--'}}</span></view>
				</view>
				<view class="div_order_item">
					<view>发货人<span>{{item.sendername}}</span></view>
					<view>电话<span>{{item.sendertel}}</span></view>
				</view>
				<view class="div_order_item">
					<view>收货人<span>{{item.receivername}}</span></view>
					<view>电话<span>{{item.receivertel}}</span></view>
				</view>
				<view class="div_order_item">
					<view>运单号<span>{{item.waybill_sn}}</span></view>
					<view><span></span></view>
				</view>
				<view class="div_order_item" v-if="type != 1">
					<view></view>
					<view></view>
				</view>
			</view>
		</view>

		<view v-if="!order_list || order_list.length <= 0" class="empty_view">暂无运单~</view>

	</view>
</template>

<script>
	import { tsToDateFormat } from '@/utils/util.js'
	export default {
		data() {
			return {
				type: '1', // 1 车次详情 2 扫码装车
				truck_item_height: 0, // 上部车辆信息的高度

				truck: {}, // 车次信息
				order_list: [], // 记录装车运单列表
			}
		},

		methods: {

		},

		computed: {
			order_num() {
				if (!this.order_list) return 0
				return this.order_list.length
			}
		},

		onLoad(options) {
			console.log('train_list页面收到的车次数据 = ', options.truck);
			this.truck = JSON.parse(options.truck)
			this.order_list = this.truck.waybill
			this.type = options.type

			let that = this
			uni.setNavigationBarTitle({
				title: that.type == '1' ? '车次详情' : '扫码装车'
			})

			setTimeout(() => {
				uni.createSelectorQuery().selectAll('.truck_item').boundingClientRect(data => {
					// console.log('truck_item.boundingClientRect = ', data)
					// that.truck_item_height = data[0].height + data[0].top
					that.truck_item_height = data[0].height
				}).exec()
			}, 200)

		},

	}
</script>

<style scoped>
	.truck_item {
		padding: 14rpx;
		/* border: solid 1rpx rgba(0, 0, 0, 0.15); */
		/* border-radius: 10rpx; */
		position: fixed;
		left: 0;
		right: 0;
		background-color: white;
	}

	.div_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}

	span {
		/* display: block; */
		margin: 0 0 0 10rpx;
		color: #1890FF;
		font-size: 26rpx;
	}

	.scan_div {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: rgba(0, 0, 0, 0.55);
		margin: 20rpx 0 0 0;
	}

	.btn_scan {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
		background-color: #1890FF;
		border-radius: 8rpx;
		margin: 0 0 0 10rpx;
	}

	.order_list_div {
		background-color: white;
	}

	.order_list_item {
		margin: 20rpx 20rpx 20rpx 20rpx;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 10rpx;
		padding: 0 0 14rpx 0;
	}

	.div_order_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 14rpx 14rpx 0 14rpx;
		font-size: 28rpx;
	}

	.btn_unload {
		width: 160rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: red;
		background-color: white;
		border: solid 1rpx rgba(0, 0, 0, 0.15);
		border-radius: 8rpx;
	}

	.empty_view {
		width: 100%;
		height: 400rpx;
		line-height: 400rpx;
		text-align: center;
		color: rgba(0, 0, 0, 0.55);
	}
</style>